<template>
  <div>
    <h3>SubItem组件</h3>
    <p>已知库存数: {{ num }}</p>
    <button @click="subFn">库存-1</button>
    <button @click="asyncSubFn">延时两秒，库存-1</button>
  </div>
</template>

<script>
// state映射使用
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    // 映射count，得到对象展开，合并到计算属性中
    ...mapState(["num"]),
  },

  methods: {
    // 同步
    ...mapMutations(["subNum"]),
    // 异步
    ...mapActions(["asyncSubNum"]),
    subFn() {
      this.subNum(1);
    },
    asyncSubFn() {
      this.asyncSubNum(1);
    },
  },
};
</script>